<template>
  <div class="lsc-details">
    <van-nav-bar
      title="产品详情"
      left-arrow
      @click-left="onClickBack"
    />
    <van-swipe class="goods-swipe" :autoplay="3000">
      <van-swipe-item>
        <img :src="goods.thumb_img" >
      </van-swipe-item>
    </van-swipe>

    <van-cell-group>
      <van-cell>
        <div class="goods-type">
          <div class="goods-type-title">型号</div>
          <div>{{ goods.model_no }}</div>
        </div>
        <div class="goods-type">
          <div class="goods-type-title">选择类型</div>
          <van-button 
            size="small" 
            v-for="(item,index) in goods.types" 
            :key="item.id" 
            :type="buttonType(item.is_default)" 
            @click="getDetailByTypeId(item.type_id, goods.model_no, index)"
            style="margin-right: 5px;">
          {{item.type_name}}
          </van-button>
        </div>
        <div class="goods-type">
          <div class="goods-type-title">数量</div>
          <van-stepper
            v-model="details.qty"
            :min="1"
            :max="100"
          />
        </div>
      </van-cell>
    </van-cell-group>

    <van-cell-group class="goods-cell-group">
      <van-cell>
        <div class="goods-type">
          <div class="goods-type-title">基础信息</div>
          <van-row gutter="20">
            <van-col span="8">分类: {{goods.classify || '暂无' }}</van-col>
            <van-col span="8">品牌: {{goods.brand || '暂无' }}</van-col>
            <van-col span="8">门幅:  {{goods.door_width || '暂无' }}</van-col>
          </van-row>
          <van-row gutter="20">
            <van-col span="8">风格: {{goods.style || '暂无' }}</van-col>
            <van-col span="8">材质: {{goods.material || '暂无' }}</van-col>
          </van-row>
        </div>
      </van-cell>
    </van-cell-group>

    <van-cell-group class="goods-cell-group">
      <van-cell>
        <div v-for="(thumb,index) in goods.img_files" :key="index">
          <img :src="thumb" width="100%">
        </div>
      </van-cell>
    </van-cell-group>

    <van-goods-action>
      <van-goods-action-big-btn @click="onAddCart(goods.prt_type)">
        加入购物车
      </van-goods-action-big-btn>
      <van-goods-action-mini-btn icon="cart" :info="this.baseInfo.cart_num.toString()" @click="onClickCart">
        购物车
      </van-goods-action-mini-btn>
    </van-goods-action>

    <!-- 查看产品详情 -->    
    <van-popup v-model="showGoodsDetails" position="right" style="width:100%;height:100%;overflow:auto;">

      <van-nav-bar
        title="产品具体要求"
        left-arrow
        @click-left="onBackGoods(1)"
      />
      <div v-if="hasAccesoriesType">
        <van-field
          v-model="details.prt_width"
          label="成品宽(m)"
          type="number"
          placeholder="请输入成品宽"
          class="lsc-goods-details-input"
        />
        <van-field
          v-model="details.prt_height"
          label="成品高(m)"
          type="number"
          placeholder="请输入成品高"
          class="lsc-goods-details-input"
        />
        <van-field
          v-model="details.zheshu"
          label="褶数(倍)"
          type="number"
          placeholder="请输入褶数(倍)"
          class="lsc-goods-details-input"
        />
        <van-cell title="对/单开" is-link :value="details.opentype" @click="showDdk=true"/>
        <van-cell title="打孔/捏褶" is-link :value="details.dakong" @click="showDkong=true"/>
        <van-switch-cell v-model="details.is_qianxian" title="铅线" />
        <van-switch-cell v-model="details.is_qiankuai" title="铅块" />
        <!-- <van-cell><van-checkbox class="lsc-details-pro-checkbox" v-model="choose.lichen" name="1">里衬</van-checkbox></van-cell> -->
        <van-switch-cell v-model="choose.lichen" title="里衬" />
        <div class="lsc-details-pro-checkbox-box" ref="lic"> 
          <van-cell title="型号" is-link :value="choose.lichenNo"  @click="onClickAccesories(1)"/>
          <!-- <van-field
            v-model="choose.lichenVal"
            label="宽度"
            placeholder="请输入里衬宽度"
            class="lsc-goods-details-input"
          /> -->
        </div>
        <!-- <van-cell><van-checkbox class="lsc-details-pro-checkbox" v-model="choose.zaoxing" name="2">造型</van-checkbox></van-cell> -->
        <van-switch-cell v-model="choose.zaoxing" title="造型" />
        <div class="lsc-details-pro-checkbox-box" ref="model"> 
          <van-cell title="型号" is-link :value="choose.zaoxingNo"  @click="onClickAccesories(2)"/>
          <van-field
            v-model="choose.zaoxingVal"
            label="宽度"
            placeholder="请输入造型宽度"
            class="lsc-goods-details-input"
          />
        </div>
        <!-- <van-cell><van-checkbox class="lsc-details-pro-checkbox" v-model="choose.huangGou" name="3">环/s钩</van-checkbox></van-cell> -->
        <van-switch-cell v-model="choose.huangGou" title="环/s钩" />
        <div class="lsc-details-pro-checkbox-box" ref="sgou"> 
          <van-cell title="型号" is-link :value="choose.huangGouNo"  @click="onClickAccesories(3)"/>
        </div>
      </div>
      <!-- <van-field
        v-model="details.remark"
        label="备注"
        placeholder="请输入备注"
        class="lsc-goods-details-input"
      /> -->
      <van-field
        id="remarkHeight"
        v-model="details.remark"
        label="备注"
        type="textarea"
        placeholder="请输入备注"
        class="lsc-goods-details-input"
        rows="1"
        autosize
      />

      <van-button style="margin-top: 20px;" type="primary" @click="addCartDemand" bottom-action>确定</van-button>

    </van-popup>
    <!-- <van-dialog v-model="showGoodsRemark" @confirm="onBackGoods(0)">
      <div class="lsc-goods-details-textarea">
        <span>备注</span>
        <textarea placeholder="请输入备注" rows="5" v-model="details.remark"></textarea>
      </div>
    </van-dialog> -->
    <!-- 对开，单开 -->
    <van-actionsheet v-model="showDdk" :actions="ddkActions" />
    <!-- 打孔，捏褶 -->
    <van-actionsheet v-model="showDkong" :actions="dkongActions" />
    
    <van-popup v-model="showAccesories" position="right" style="width:100%;height:100%;overflow-y:auto;">
      
      <van-nav-bar
        title="选择型号"
        left-arrow
        @click-left="onBackGoodsDetails"
      />
      <div v-if="accesoriesModel==1">
        <van-radio-group v-model="choose.radioLichen">
          <van-cell-group>
            <van-cell 
              v-for="(item,index) in accesories.lichen_items"
              :key="index"
              :title="item.model_no" 
              clickable @click="onChangeAccesories(1, item.id, item.model_no, item.name)">
              <van-radio :name="item.id" />
            </van-cell>
          </van-cell-group>
        </van-radio-group>
      </div>
      <div v-if="accesoriesModel==2">
        <van-radio-group v-model="choose.radioZaoxing">
          <van-cell-group>
            <van-cell 
              v-for="(item,index) in accesories.zaoxing_items"
              :key="index"
              :title="item.model_no" 
              clickable @click="onChangeAccesories(2, item.id, item.model_no, item.name)">
              <van-radio :name="item.id" />
            </van-cell>
          </van-cell-group>
        </van-radio-group>
      </div>
      <div v-if="accesoriesModel==3">
        <van-radio-group v-model="choose.radioHuangGou">
          <van-cell-group>
            <van-cell 
              v-for="(item,index) in accesoriesHG"
              :key="index"
              :title="item.model_no" 
              clickable @click="onChangeAccesories(3, item.id, item.model_no, item.name)">
              <van-radio :name="item.id" />
            </van-cell>
          </van-cell-group>
        </van-radio-group>
      </div>
    </van-popup>
    <div class="lsc-fixed-button-bottom" v-if="showAccesories">
      <van-button type="primary" @click="showAccesories = false" bottom-action>确定</van-button>
    </div>

    <div class="lsc-loading" v-if="isLoading">
      <div class="lsc-loading-mask"></div>
      <van-loading color="black" />
    </div>
  </div>
</template>

<script>
import api from '../../api'
import { mapGetters } from 'vuex'

export default {
  name: 'goods-details',
  computed: {
    ...mapGetters({
      isLoading: 'getLoading',
      baseInfo: 'getBaseInfo',
      accesories: 'getAccesories'
    })
  },
  data () {
    return {
      prtId: 0,
      showDdk: false,
      ddkActions: [
        {
          name: '对开',
          callback: this.onClickDdk
        },
        {
          name: '单开',
          callback: this.onClickDdk
        }
      ],
      showDkong: false,
      dkongActions: [
        {
          name: '打孔',
          callback: this.onClickDkong
        },
        {
          name: '捏褶',
          callback: this.onClickDkong
        }
      ],
      accesoriesHG: null,
      showGoodsDetails: false,
      showGoodsRemark: false,
      goods: {},
      details: {
        prt_id: 0,
        qty: 1,
        remark: '',
        prt_type: 0,
        prt_width: '',
        prt_height: '',
        zheshu: '',
        dakong: '',
        opentype: '',
        is_qianxian: false,
        is_qiankuai: false,
        model_no: '',
        cart_details: []
      },
      defaultTypes: 0,
      showAccesories: false,
      accesoriesModel: 1,
      hasAccesoriesType: false,
      choose: {
        lichen: false,
        zaoxing: false,
        huangGou: false,
        lichenVal: '',
        zaoxingVal: '',
        lichenNo: '',
        zaoxingNo: '',
        huangGouNo: '',
        radioLichen: 0,
        radioZaoxing: 0,
        radioHuangGou: 0,
        chooseModelNo: ''
      }
    }
  },
  created() {
    
    // 获取商品信息
    let modelNo = this.$route.query.modelNo
    let cid = this.$route.query.cid
    this.getDetailByModel(modelNo, cid)
    // 获取各辅料选项初始值
    this.$store.dispatch('fetchAccesories', modelNo)
    this.setRemarkHeight()
  },
  watch: {
    'choose.lichen'(val) {
      if(val) {
        this.$refs.lic.style.display = 'block'
        return
      }
      
      this.$refs.lic.style.display = 'none'
    },
    'choose.zaoxing'(val) {
      if(val) {
        this.$refs.model.style.display = 'block'
        return
      }
      
      this.$refs.model.style.display = 'none'
    },
    'choose.huangGou'(val) {
      if(val) {
        this.$refs.sgou.style.display = 'block'
        return
      }
      
      this.$refs.sgou.style.display = 'none'
    },
    'details.zheshu' (val) {
      this.$nextTick(()=>{
        setTimeout(()=>{

          let isCheck = this.validNumber(val)
          if(!isCheck) {
            return this.details.zheshu = ''
          }
          // this.choose.lichenVal = this.choose.zaoxingVal = (this.details.prt_width * val).toFixed(2)
        }, 100)
      })
    },
    'details.prt_width' (val) {
      this.$nextTick(()=>{
        setTimeout(()=>{

          let isCheck = this.validNumber(val)
          if(!isCheck) {
            return this.details.prt_width = ''
          }
          
          // this.choose.lichenVal = this.choose.zaoxingVal = (this.details.zheshu * val).toFixed(2)
        }, 100)
      })
    },
    'details.prt_height' (val) {
      this.$nextTick(()=>{
        setTimeout(()=>{

          let isCheck = this.validNumber(val)
          if(!isCheck) {
            return this.details.prt_height = ''
          }
        }, 100)
      })
    }
  },
  methods: {
    onClickBack() {
      let path = this.$route.query.path || 'main'
      this.$router.push(path)
    },
    setRemarkHeight() {

      setTimeout(()=>{
        this.$nextTick(()=>{
          // 重置textarea高度属性
          document.querySelector('#remarkHeight').style.height = 'inherit'
        })
      },100)
    },
    getDetailByModel(modelNo, cid) {
      this.$store.dispatch('fetchLoading', true)
      
      this.axios.get(api.good.detailByModel, {params: {model:modelNo, class_id: cid}})
        .then((res) => {
          this.$store.dispatch('fetchLoading', false)
          this.goods = res.data.data
          if(this.goods.classify == '成品') {
            this.prtId = this.goods.prt_id
          }else {
            this.prtId = 0
          }
        })
    },
    getDetailByTypeId(tid, modelNo, index) {
      // 初始化数据
      this.details.prt_id = 0
      this.details.qty = 1
      this.details.remark = ''
      this.details.prt_type = 0
      this.details.prt_width = ''
      this.details.prt_height = ''
      this.details.zheshu = ''
      this.details.dakong = ''
      this.details.opentype = ''
      this.details.is_qianxian = false
      this.details.is_qiankuai = false
      this.details.model_no = ''
      this.details.cart_details = []
      
      this.defaultTypes = index
      this.$store.dispatch('fetchLoading', true)
      const params = {
        type_id: tid,
        model_no: modelNo
      }
      
      this.axios.get(api.good.detailByTypeId, {params: params})
        .then((res) => {
          this.$store.dispatch('fetchLoading', false)
          if (res.data.retcode != 0) {
            this.$toast.fail(res.data.retmsg);
          }else {
            this.goods = res.data.data
            if(this.goods.classify == '成品') {
              this.prtId = this.goods.prt_id
            }else {
              this.prtId = 0
            }
          }
        })

      this.setRemarkHeight()
    },
    buttonType(isDefault) {
      return isDefault ? 'danger' : 'default'
    },
    onBackGoodsDetails() {
      this.showAccesories = false
    },
    onChangeAccesories(type, id, model, name) {
      console.log(name)
      if(type == 1) {
        this.choose.lichenNo = model
        this.choose.radioLichen = id
      }
      if(type == 2) {
        this.choose.zaoxingNo = model
        this.choose.radioZaoxing = id
        
        name === '帘头' ? this.choose.zaoxingVal = (1 * this.details.prt_width).toFixed(2)
                  : this.choose.zaoxingVal = (this.details.zheshu * this.details.prt_width).toFixed(2)
      }
      if(type == 3) {
        this.choose.huangGouNo = model
        this.choose.radioHuangGou = id
      }
    },
    onAddCart(prt_type) {
      this.showGoodsDetails = true
      prt_type==1 ? this.hasAccesoriesType = true : this.hasAccesoriesType = false    
    },
    onBackGoods() {
      this.showGoodsDetails = false 
    },
    onClickCart() {
      this.$router.push('cart');
    },
    addCartDemand() {
      if(!this.details.prt_width && this.hasAccesoriesType) {
        this.$toast('请填空正确的成品宽');
        return;
      }else if(!this.hasAccesoriesType) {
        this.details.prt_width = 0
      }

      if(!this.details.prt_height && this.hasAccesoriesType) {
        this.$toast('请填空正确的成品高');
        return;
      }else if(!this.hasAccesoriesType) {
        this.details.prt_height = 0
      }

      if(!this.details.zheshu && this.hasAccesoriesType) {
        this.$toast('请填空正确的褶数');
        return;
      }else if(!this.hasAccesoriesType) {
        this.details.zheshu = 0
      }

      if(!this.details.opentype && this.hasAccesoriesType) {
        this.$toast('请选择对/单开');
        return;
      }else if(!this.hasAccesoriesType) {
        this.details.opentype = ''
      }
      if(!this.details.dakong && this.hasAccesoriesType) {
        this.$toast('请选择打孔/捏褶');
        return;
      }else if(!this.hasAccesoriesType) {
        this.details.dakong = ''
      }

      if(!this.choose.lichenNo && this.choose.lichen) {
        this.$toast('请选择里衬型号');
        return;
      }
      if(!this.choose.zaoxingNo && this.choose.zaoxing) {
        this.$toast('请选择造型型号');
        return;
      }
      if(!this.choose.huangGouNo && this.choose.huangGou) {
        this.$toast('请选择环/S钩型号');
        return;
      }

      this.details.prt_id = this.goods.prt_id
      this.details.prt_type = this.goods.prt_type
      this.details.model_no = this.goods.model_no

      this.details.cart_details = []
      if(this.choose.lichen) {
        this.details.cart_details.push({
          part_name: '里衬',
          attribute: this.choose.lichenNo.split('-')[0],
          attribute_val: 0, //this.choose.lichenVal,
          sub_prt_id: this.choose.radioLichen
        })
      }
      if(this.choose.zaoxing) {
        this.details.cart_details.push({
          part_name: '造型',
          attribute: this.choose.zaoxingNo.split('-')[0],
          attribute_val: this.choose.zaoxingVal,
          sub_prt_id: this.choose.radioZaoxing
        })
      }
      if(this.choose.huangGou) {
        this.details.cart_details.push({
          part_name: '环/S钩',
          attribute: this.choose.huangGouNo.split('-')[0],
          attribute_val: 0,
          sub_prt_id: this.choose.radioHuangGou
        })
      }
      
      this.$toast.loading({
        duration: 0,
        message: '正在保存...'
      });
      this.axios.post(api.shoppingCart.confirmPrtDemand, this.details)
        .then(res=>{
          if (res.data.retcode != 0) {
            this.$toast.fail(res.data.retmsg);
          }else {
            this.$toast.clear()
            this.showGoodsDetails = false
            this.showGoodsRemark = false
            this.baseInfo.cart_num = this.baseInfo.cart_num + 1
          }
        })
    },
    onClickAccesories(type) {
      this.showAccesories = true
      this.accesoriesModel = type
    },
    onClickDdk(item) {
      this.details.opentype = item.name
      this.showDdk = false
    },
    onClickDkong(item) {
      this.details.dakong = item.name
      this.choose.huangGouNo = ''
      this.onChangeAccesories(3, '', '', '')
      this.showDkong = false
      let data = this.accesories.huangou_items
      if(item.name == '打孔') {
        this.accesoriesHG = data.filter(function(i) {
          if(i.name=='环') return i;
        });
      }else {
        this.accesoriesHG = data.filter(function(i) {
          if(i.name!='环') return i;
        });
      }
    },
    validNumber(num) {
      let val = num.toString()
      if(val != "" && !val.match(/^[\+\-]?\d*?\.?\d*?$/)){
        this.$toast('请输入正数或小数');
        return false;
      }else{
        return true
      } 
    }
  }
}
</script>

<style>
.lsc-details .lsc-goods-details-input>.van-cell__value>.van-field__control {
  text-align: right;
}
.lsc-details .lsc-details-pro-checkbox>i {
  float: right;
}
.lsc-details .lsc-details-pro-checkbox>span {
  margin-left: 0;
}


.lsc-details .lsc-details-pro-checkbox-box {
  display: none;
  padding: 0 20px;
  background-color: #e5e5e5;
}
.lsc-details .lsc-details-pro-checkbox-box .van-cell,
.lsc-details .lsc-details-pro-checkbox-box .van-field__control {
  background-color: #e5e5e5;
}
.lsc-details .lsc-details-pro-checkbox-box .van-cell--clickable {
  border-bottom: 1px solid rgb(131, 131, 131);
}
.lsc-details .lsc-details-pro-checkbox-box .van-cell--clickable:last-child {
  border-bottom: 0;
}
.lsc-details .van-switch-cell {
    border-bottom: 1px solid #f6f6f6;
}
</style>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.lsc-details  {
  padding-bottom: 50px;
}
.lsc-details .goods-swipe img {
  width: 100%;
  /* height: 7.5rem; */
  display: block;
}
.lsc-details .goods-title {
  font-size: 16px;
}
.lsc-details .goods-type {
  margin-top: 8px;
}
.lsc-details .goods-type-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 8px;
}
.lsc-details .goods-express {
  color: #999;
  font-size: 12px;
  padding: 5px 15px;
}
.lsc-details .goods-cell-group {
    margin: 15px 0;
}
.lsc-details .goods-cell-group .van-cell__value {
  color: #999;
}
.lsc-details .lsc-goods-details-textarea {
  margin: 10px;
}
.lsc-details .lsc-goods-details-textarea span {
  display: block;
  padding-bottom: 8px;
}
.lsc-details .lsc-goods-details-textarea textarea {
  width: 100%;
  border: 0;
}

</style>

